<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script th:src="@{/plugins/vue.js}" type="text/javascript"></script>
    <script th:src="@{/plugins/axios.js}" type="text/javascript"></script>
    <script th:src="@{/plugins/vue-uploader.js}" type="text/javascript"></script>
    <title>文件上传</title>
    <style>
        .uploader-example {
            width: 880px;
            padding: 15px;
            margin: 40px auto 0;
            font-size: 12px;
            box-shadow: 0 0 10px rgba(0, 0, 0, .4);
        }
        .uploader-example .uploader-btn {
            margin-right: 4px;
        }
        .uploader-example .uploader-list {
            max-height: 440px;
            overflow: auto;
            overflow-x: hidden;
            overflow-y: auto;
        }
    </style>
</head>
<body>
<div id="app">
    <uploader :options="options"
              @file-added="onFileAdded"
              @file-success="onFileSuccess"
              @file-error="onFileError"
              @file-progress="onFileProgress"
              class="uploader-example">
        <uploader-unsupport></uploader-unsupport>
        <uploader-drop>
            <p>可拖拽文件到此进行上传</p>
            <uploader-btn>select files</uploader-btn>
            <uploader-btn :attrs="attrs">select images</uploader-btn>
        </uploader-drop>
        <uploader-list></uploader-list>
    </uploader>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                options: {
                    // 上传URL
                    target: '//localhost/file/upload',
                    // 单文件上传?
                    singleFile: false,
                    // 分块时按照该值来分 10M
                    chunkSize: 10 * 1024 * 1024,
                    // 上传并发数(并发上传线程数)
                    simultaneousUploads: 3,
                    // 上传文件时文件的参数名
                    fileParameterName: 'file',
                    // 额外的一些请求头
                    headers: {},
                    // 当上传的时候所使用的是方式
                    method: 'multipart',
                    // 测试的时候使用的 HTTP 方法
                    testMethod: 'GET',
                    // 真正上传的时候使用的 HTTP 方法
                    uploadMethod: 'POST',
                    // 是否测试每个块是否在服务端已经上传了，主要用来实现秒传、跨浏览器上传等
                    testChunks: true,
                    // 最大自动失败重试上传次数
                    maxChunkRetries: 0,
                    // 服务器分片校验函数，秒传及断点续传基础
                    checkChunkUploadedByResponse: (chunk, message) => {
                        console.log(chunk, message)
                        let {result} = JSON.parse(message);
                        if (result.uploaded) {
                            // 已上传
                            return true;
                        }
                        // [1,3,4] --> 只需要上传分片2
                        return (result.uploadedChunks || []).indexOf(chunk.offset + 1) >= 0
                    },
                    // generateUniqueIdentifier: () => "修改文件唯一标识(md5)"
                },
                attrs: {
                    accept: 'image/*'
                }
            }
        },
        methods: {
            onFileAdded(file, event) {
                console.log("event => ",event)
                // event.preventDefault();
                console.log("file => ", file);
                // 有时 fileType为空，需截取字符
                console.log("文件类型：" + file.fileType + "文件大小：" + file.size + "B");
                // 可以用来判断文件上传类型是否正确
            },
            onFileSuccess(rootFile, file, response, chunk) {
                console.log("上传成功", rootFile, file, response, chunk);
                // 这里可以做一些上传成功之后的事情，比如，如果后端需要合并的话，可以通知到后端合并
            },
            onFileError(rootFile, file, message, chunk) {
                console.log("上传出错：" + message, rootFile, file, message, chunk);
            },
            onFileProgress(rootFile, file, chunk) {
                console.log(`当前进度：${Math.ceil(file._prevProgress * 100)}%`);
            },
        }
    })
</script>
</body>
</html>